<template>
  <div class="about">
    <div class="head">
        <div class="top">
                <div @click="fan()">
                    <img src="../../assets/imageZhaoPin/返回黑@2x.png" alt="">
                    <span>返回</span>
                </div>
                <div>
                    <span style="font-size:17px;">招聘发布</span>
                </div>
                <div @click="gonew()">
                    <span style="color:#1DA4F2;">新建招聘</span>
                </div>
        </div>
       <div class="top2">

         <van-dropdown-menu active-color="#1DA4F2">
            <van-dropdown-item v-model="value1" :options="option1" title="期望薪资" @change="xiu1()"/>
              <van-dropdown-item title="工作地点" ref="item" @open="xiu()"></van-dropdown-item>
            <van-dropdown-item v-model="value2" :options="option2" title="发布日期" @change="xiu2()"/>
            </van-dropdown-menu>
            <van-popup v-model="show1" round position="bottom" :style="{ height: '46%' }" @close="xx">
               <van-area title="标题" :area-list="areaList" @confirm="onAreaConfirm" @cancel="show1=false"/>
            </van-popup>
    </div>
    </div>
    <div class="main1">
    <div class="main" v-for="(item,k) in vshow" :key="k" @click="goxiang($event,k)">
        <div class="fath">
        <div class="left">
            <img src="../../assets/imageZhaoPin/聘@2x.png" alt="">
        </div>
        <div class="center">
            <h3>{{item.POSITION}}</h3>
            <p>
                <span>{{item.CONTACT}}</span>
                <span v-if="item===1">男</span>
                <span v-else>女</span>
                <span>{{item.AGE}}岁</span>
            </p>
            <p>工作年限: {{item.YEARS}}</p>
            <p class="ssx">岗位要求: {{item.REQUIREMENT}}</p>
        </div>
        <div class="right">
            <p style="margin-bottom:40px;">{{item.SALARY1/1000}}k-{{item.SALARY2/1000}}k</p>
            <span>{{item.DISTRICT}}</span>
        </div>
        </div>
        </div>
    </div>
  </div>
</template>

<script>
import AeraInfo from '../../assets/UseJS/area.js'
import {listPeople} from '../../apiZhaoPin/api'

export default {
  data () {
    return {
      img1: require('../../assets/imageZhaoPin/下拉@2x.png'),
      img2: require('../../assets/imageZhaoPin/上拉@2x.png'),
      value1: 0,
      value2: 'a',
      option1: [
        { text: '不限', value: 0 },
        { text: '3k以下', value: 1 },
        { text: '3k-5k', value: 2 },
        { text: '5k-10k', value: 3 },
        { text: '10k以上', value: 4 }
      ],
      option2: [
        { text: '不限', value: 'a' },
        { text: '当天发布', value: 'b' },
        { text: '7天内发布', value: 'c' },
        { text: '15天内发布', value: 'd' }
      ],
      show1: false,
      areaList: AeraInfo,
      arrArea: [],
      va1: '',
      va2: '',
      addrInfo: '',
      vshow: []
    }
  },

  methods: {
    xiu () {
      console.log(111)
      this.show1 = true
    },

    fan () {
    //   var str = JSON.stringify({ active:0});
    //   localStorage.active = str;
      this.$router.back(-1)
    },
    onAreaConfirm (val) {
      this.show1 = false
      this.arrArea = val
      // 获取地区
      var addrInfo = val[0].name + ',' + val[1].name + ',' + val[2].name
      this.addrInfo = addrInfo
    },
    goxiang (e, k) {
      this.$router.push('zhaoxiang?ip=' + this.vshow[k].EMPLOY_ID)
    },
    xx () {
      listPeople({
        SALARY: this.va1,
        ADDRESS: this.addrInfo,
        PAGE: 0,
        DATE: this.va2,
        STATUS: 1
      }).then(res => {
        console.log(res)
        this.vshow = res
      })
    },
    xiu1 () {
      console.log(this.value1)
      if (this.value1 == 0) {
        this.va1 = null
      } else {
        this.va1 = this.value1
      }
      listPeople({
        SALARY: this.va1,
        ADDRESS: this.addrInfo,
        PAGE: 0,
        DATE: this.va2,
        STATUS: 1
      }).then(res => {
        console.log(res)
        this.vshow = res
      })
    },
    xiu2 () {
      console.log(this.value1)
      if (this.value2 == 'a') {
        this.va2 = 0
      } else if (this.value2 == 'b') {
        this.va2 = 1
      } else if (this.value2 == 'c') {
        this.va2 = 2
      } else if (this.value2 == 'd') {
        this.va2 = 3
      }
      listPeople({
        SALARY: this.va1,
        ADDRESS: this.addrInfo,
        PAGE: 0,
        DATE: this.va2,
        STATUS: 1
      }).then(res => {
        console.log(res)
        this.vshow = res
      })
    },
    gonew () {
      this.$router.push('gozhao')
    },
    aa () {
      // var adress=JSON.parse(localStorage.adress).adress
      console.log(this.value1)

      listPeople({
        PAGE: 0,
        STATUS: 1
      }).then(res => {
        console.log(res)
        this.vshow = res
      })
    }

  },
  created () {
    this.aa()
    // document.title = "招聘";
  }
}
</script>
<style scoped>
.clear:after {
  content: "";
  display: block;
  clear: both;
}
.clear {
  zoom: 1;
}
.about{
    position: relative;
}
.head{
    width: 100%;
    background-color: #fff;
    position: fixed;
    top:0px;
}
.top{
    width: 92%;
    height: 44px;
    margin: 0px auto;
    display: flex;
     justify-content:space-between;
     align-items:center;
}
.top img{
    width: 7px;
    height: 13px;
    margin-right: 5px;
    margin-top: 5px;
}
.top2{
    /* display: flex;
     justify-content:space-between;
     align-items:center; */
     border-bottom: 1px solid #E5E5E5;
     background-color: #fff;

}
.choes{
    width: 33.3%;
    height: 44px;
    text-align: center;
    display: flex;
    align-items:center;
}
.choes .p{
    width: 100%;
    border-right: 1px solid #E5E5E5;
    text-align: center;
    margin: 0px auto;
    font-size: 16px;
    font-weight: 600;
}
.top2  img{
    width: 8px;
    height: 4.5px;
    margin-left: 5px;
    margin-bottom: 3px;
}
.change{
    color:#1DA4F2;
}
.main1{
    margin-top: 88px;
    margin-bottom: 50px;
}
.main{
    width: 100%;
    background-color: #fff;
    margin-bottom: 5px;

}
.fath{
    width: 92%;
    height: 120px;
    margin: 0px auto;
    display: flex;
     justify-content:space-between;
    align-items:center;

}
.left img{
    width: 60px;
    height: 60px;
    /* margin-left: 15px; */
}
h3,p{
    margin: 0px;
}
.center{
    width: 180px;
}
.ssx{
   display: -webkit-box;/*作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 1; /*显示的行数；如果要设置2行加...则设置为2*/
    overflow: hidden; /*超出的文本隐藏*/
    text-overflow: ellipsis; /* 溢出用省略号*/
    -webkit-box-orient: vertical;/*伸缩盒子的子元素排列：从上到下*/
}
.center p{
    font-weight: 500;
    font-size: 15px;
    color:#666666;
}
.center span{
    margin-right: 15px;
}
.right{
    text-align: right;
}
.right p{
    width: 72px;
    font-size: 15px;
    color: #1DA4F2;
}
.right span{
    font-size: 10px;
    font-weight: normal;

color: #999999
}
/deep/.van-dropdown-menu__bar{
    box-shadow: none;
    background-color: rgba(29, 164, 242, 0.1);
}
</style>
